<template>
	<div style="overflow: auto;width:100%;">
        <div><el-button size="mini" @click="onAddRowClickHandler">增加行</el-button></div>
		<table cellspacing="0" cellpadding="0" class="editabletable" style="margin-top: 5px;">
			<thead>
				<tr>
					<th v-for="(column,index) in componentModel.children" :key="index"
						:style="{'display':column.visible ? '':'none'}" style="min-width:100px;">{{column.title}}</th>
					<th></th>	
				</tr>
			</thead>
			<tbody>
				<tr v-for="(row) in datamodel" :key="row.item_index">
					<td v-for="(editor,index) in row.row" :key="index"
						:style="{'display':componentModel.children[index].visible ? '':'none'}">
						<TextComponent v-if="editor.type=='text'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></TextComponent>
						<LabelComponent v-else-if="editor.type=='label'" :componentModel="editor"></LabelComponent>
						<NumberComponent v-else-if="editor.type=='number'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></NumberComponent>
						<SelectComponent v-else-if="editor.type=='select'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></SelectComponent>
						<AttributeSetInstanceComponent v-else-if="editor.type=='search' && editor.dataField=='product_attribute_set_instance_id'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler">
						</AttributeSetInstanceComponent>
						<SearchComponent v-else-if="editor.type=='search'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler" @onIconClick="onIconClickHandler"></SearchComponent>
						<DatetimeComponent v-else-if="editor.type=='datetime'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></DatetimeComponent>
						<DateComponent v-else-if="editor.type=='date'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></DateComponent>
						<TimeComponent v-else-if="editor.type=='time'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></TimeComponent>
						<CheckboxComponent v-else-if="editor.type=='checkbox'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></CheckboxComponent>
						<FormulaComponent v-else-if="editor.type=='formula'" :componentModel="editor" :scope="'table'">
						</FormulaComponent>
						<ColorComponent v-else-if="editor.type=='color'" :componentModel="editor" :scope="'table'"
							@onValueChange="onValueChangeHandler"></ColorComponent>
					</td>
					<td>
						<i class="el-icon-delete" @click="onDeleteRowClickHandler(row.item_index)"></i>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	import TextComponent from './TextComponent.vue';
	import LabelComponent from './LabelComponent.vue';
	import NumberComponent from './NumberComponent.vue';
	import SelectComponent from './SelectComponent.vue';
	import SearchComponent from './SearchComponent.vue';
	import DatetimeComponent from './DatetimeComponent.vue';
	import DateComponent from './DateComponent.vue';
	import TimeComponent from './TimeComponent.vue';
	import CheckboxComponent from './CheckboxComponent.vue';
	import AttributeSetInstanceComponent from './AttributeSetInstanceComponent.vue';
	import FormulaComponent from './FormulaComponent.vue';
	import ColorComponent from './ColorComponent.vue';
	import utils from '@/utils/utils.js';
	import {
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	export default {
		name: "EditableTableComponent",
		props: ["componentModel"],
		components: {
			TextComponent,
			LabelComponent,
			NumberComponent,
			SelectComponent,
			SearchComponent,
			DatetimeComponent,
			DateComponent,
			TimeComponent,
			CheckboxComponent,
			AttributeSetInstanceComponent,
			FormulaComponent,
			ColorComponent
		},
		data() {
			return {
				datamodel: [],
				item_index: -1,
				previous_item_index: -1,
				deleteRowIndex:-1,
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				for (var i in prop) {
					if (i == "visible") {
						this.setVisible(prop[i]);
					} else if (i == "data") {
						this.setDataModel(prop[i]);
					}
				}
			},
			setDataModel(datamodel) {
				if(datamodel==null){
					return;
				}
				var dataModel = [];
				this.item_index = 0;
				this.previous_item_index=-1;
				this.deleteRowIndex=-1;
				for (var i = 0; i < datamodel.length; i++) {
					var row = [];
					for (var j = 0; j < this.componentModel.children.length; j++) {
						var editorComponentModel = this.componentModel.children[j].children[0];
						var copy = utils.deepCopy(editorComponentModel);
						copy.oldId = copy.id;
						copy.item_index = this.item_index;
						copy.id += "__"+this.componentModel.id+"_et" + this.item_index;
						row.push(copy);
					}
					dataModel.push({
						row: row,
						item_index: this.item_index
					});
					this.item_index++;
				}
				this.datamodel = dataModel;

				this.$nextTick(function() {
					for (var i = 0; i < this.item_index; i++) {
						this.setRowData(datamodel[i], i);
					}
				});

			},
			setRowData(data, index) {
				for (var i = 0; i < this.children.length; i++) {
					var idComponent = this.children[i];
					if (idComponent.componentModel != undefined) {
						var id = idComponent.componentModel.id;
						if (utils.endsWith(id,this.componentModel.id+"_et" + index)) {
							var prop = data[idComponent.componentModel.oldId];
							if(prop!=undefined){
								idComponent.setProp(prop);
							}
						}
					}
				}
			},
			getState() {
				var data = [];
				for (var i = 0; i < this.item_index; i++) {
					var isExists = false;
					var rowData = {};
					for (var j = 0; j < this.children.length; j++) {
						var idComponent = this.children[j];
						if (idComponent.componentModel != undefined) {
							var id = idComponent.componentModel.id;
							if (utils.endsWith(id, this.componentModel.id+"_et" + i)) {
								isExists = true;
								break;
							}
						}
					}
					if (isExists) {
						data.push(rowData);
						for(j=0;j<this.datamodel.length;j++){
							if(this.datamodel[j].item_index==i){
								if(this.datamodel[j]["recordState"]!=undefined){
									rowData["_recordState_"]=this.datamodel[j]["recordState"];
								}
								break;
							}
						}
						for (j = 0; j < this.children.length; j++) {
							idComponent = this.children[j];
							if (idComponent.componentModel != undefined) {
								id = idComponent.componentModel.id;
								if (utils.endsWith(id, this.componentModel.id+"_et" + i)) {
									rowData[idComponent.componentModel.dataField] = idComponent.getValue();
								}
							}
						}
					}
				}
				var sumbmitData = {};
				sumbmitData[this.componentModel.id + "_data"] = JSON.stringify(data);
				return sumbmitData;
			},
			addRow(data) {
				var row = [];
				for (var j = 0; j < this.componentModel.children.length; j++) {
					var editorComponentModel = this.componentModel.children[j].children[0];
					var copy = utils.deepCopy(editorComponentModel);
					copy.oldId = copy.id;
					copy.item_index = this.item_index;
					copy.id += "__"+this.componentModel.id+"_et" + this.item_index;
					row.push(copy);
				}
				this.datamodel.push({
					row: row,
					item_index: this.item_index,
					"recordState":"new"
				});
				this.$nextTick(function() {
					this.setRowData(data, this.item_index);
					this.item_index++;
				});
			},
			removeRow() {
				for (var i = 0; i < this.datamodel.length; i++) {
					if (this.datamodel[i].item_index == this.deleteRowIndex) {
						this.datamodel.splice(i, 1);
						break;
					}
				}
			},
			onValueChangeHandler(component) {
				if (this.previous_item_index != -1) {
					this.resetComponentModel(this.previous_item_index);
				}
				var item_index = component.componentModel.item_index;
				var submitPara = this.getSubmitPara(item_index,true);
				submitPara[this.componentModel.id+"_changecomponent"]=component.componentModel.id;
				
				//sendComponentValueChangeRequest(this,submitPara);
				var eventType;
				if (component.componentModel.onChange === true) {
					eventType = "changeEvent";
				} else if (component.componentModel.componentValueChangeSystem === true) {
					eventType = "componentValueChangeSystemEvent";
				}
				if(eventType==undefined){
					return;
				}
				submitPara[this.componentModel.id+"_eventtype"]=eventType;
				sendComponentEventRequest(this,"changeEvent",submitPara);
				this.previous_item_index = item_index;
			},
			getSubmitPara(item_index,isId) {
				var data={};
				for (var i = 0; i < this.children.length; i++) {
					var idComponent = this.children[i];
					if (idComponent.componentModel != undefined) {
						var id = idComponent.componentModel.id;
						if (utils.endsWith(id,this.componentModel.id+"_et" + item_index)) {
							var value = idComponent.getValue();
							idComponent.componentModel.backupId = idComponent.componentModel.oldId;
							if (value != undefined) {
								if(isId==true){
									data[idComponent.componentModel.oldId]=value;
								}else{
									data[idComponent.componentModel.dataField]=value;
								}	
							}
						}
					}
				}
				return data;
			},
			resetComponentModel(previous_item_index) {
				for (var i = 0; i < this.children.length; i++) {
					var idComponent = this.children[i];
					if (idComponent.componentModel != undefined) {
						var id = idComponent.componentModel.id;
						if (utils.endsWith(id,this.componentModel.id+"_et" + previous_item_index)) {
							idComponent.componentModel.backupId = undefined;
						}
					}
				}
			},
			onAddRowClickHandler() {
				sendComponentEventRequest(this, "addRowEvent", {});
			},onDeleteRowClickHandler(item_index){
				this.$confirm("确定要删除吗？", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRowIndex=item_index;
					var data=this.getSubmitPara(item_index,false);
					var id=data["id"];
					if(id==undefined){
						id="";
					}
					sendComponentEventRequest(this, "removeRowEvent", {"id":id});
				}).catch(() => {
				
				});
				
			}
		},
	}
</script>

<style>

</style>
